<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body id="app">


<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      rows: [],
      cols: [],
      bombs: 10,
      revealedCount: 0,
      gameOver: false
    },
    created() {
      this.reset();
    },
    methods: {
      reset() {
        this.rows = [];
        this.cols = [];
        this.revealedCount = 0;
        this.gameOver = false;
        for (let i = 0; i < 10; i++) {
          const row = [];
          for (let j = 0; j < 10; j++) {
            row.push({
              isBomb: false,
              isFlagged: false,
              isRevealed: false,
              neighborBombs: 0
            });
          }
          this.rows.push(row);
        }
        for (let i = 0; i < this.bombs; i++) {
          let row, col;
          do {
            row = Math.floor(Math.random() * 10);
            col = Math.floor(Math.random() * 10);
          } while (this.rows[row][col].isBomb);
          this.rows[row][col].isBomb = true;
          for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
              if (row + i >= 0 && row + i < 10 && col + j >= 0 && col + j < 10) {
                this.rows[row + i][col + j].neighborBombs++;
              }
            }
          }
        }
      },
      revealCell(row, col) {
        if (this.gameOver || this.rows[row][col].isFlagged || this.rows[row][col].isRevealed) {
          return;
        }
        if (this.rows[row][col].isBomb) {
          this.gameOver = true;
          return;
        }
        this.rows[row][col].isRevealed = true;
        this.revealedCount++;
        if (this.revealedCount === 90) {
          this.gameOver = true;
          return;
        }
        if (this.rows[row][col].neighborBombs === 0) {
          for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
              if (row + i >= 0 && row + i < 10 && col + j >= 0 && col + j < 10) {
                this.revealCell(row + i, col + j);
              }
            }
          }
        }
      },
      toggleFlag(row, col) {
        if (this.gameOver || this.rows[row][col].isRevealed) {
          return;
        }
        this.rows[row][col].isFlagged = !this.rows[row][col].isFlagged;
      }
    }
  });


</script>
</body>
</html>
